<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>第一个场景</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" user-scalable="no">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="webgl-output"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>
<script>
    function init() {
        //创建一个场景; 需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(new THREE.Color(0xffffff))
        //显示三维坐标系
        const axes = new THREE.AxesHelper(20)
        //添加坐标系
        scene.add(axes)
        //创建平面
        let planeGeometry = new THREE.PlaneGeometry(60, 20)
        //设置材质
        let planeMaterial = new THREE.MeshBasicMaterial({
            color: 0xcccccc
        })
        //创建地面
        let plane = new THREE.Mesh(planeGeometry, planeMaterial)
        //物体移动位置
        plane.rotation.x = -0.5 * Math.PI
        plane.position.x = 15
        plane.position.y = 0;
        plane.position.z = 0;
        scene.add(plane)
        //定位相机,并且指向场景中心
        camera.position.x = -30
        camera.position.y = 40
        camera.position.z = 30
        camera.lookAt(scene.position)

        document.body.appendChild(renderer.domElement)
        renderer.render(scene, camera)
    }

    window.onload = init

</script>
</body>
</html>
